<template>
  <div>
    <div v-if="loading" class="loadingOut">
      <div class="loadingBox">
        <i class="el-icon-loading"></i>
        <div>拼命加载中...</div>
      </div>
    </div>
    <div v-else-if="list.length >= 1" class="buildList">
      <div v-for="(item, index) in list" :key="index" class="buildBox">
        <div class="buildTitle">
          <span>{{ item.room_group_name }}</span>
          <el-button
            v-if="queryForm.room_type == '1'"
            class="setting"
            icon="el-icon-plus"
            type="text"
            @click="handleRoom(item.community_id)"
          >
            添加房源
          </el-button>
          <el-dropdown
            v-else-if="queryForm.room_type == '2'"
            placement="right"
            size="medium"
            trigger="click"
            @command="
              (value) => {
                roomMenu(value, item)
              }
            "
          >
            <span class="el-dropdown-link">
              <vab-icon class="setting" icon="list-settings-line" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="addRoom">添加房间</el-dropdown-item>
              <el-dropdown-item command="editRoom">编辑整套</el-dropdown-item>
              <el-dropdown-item command="deleteRoom">删除整套</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown
            v-else-if="queryForm.room_type == '3'"
            placement="right"
            size="medium"
            trigger="click"
            @command="
              (value) => {
                buildMenu(value, item)
              }
            "
          >
            <span class="el-dropdown-link">
              <vab-icon class="setting" icon="list-settings-line" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="addRoom">添加房间</el-dropdown-item>
              <el-dropdown-item command="deleteFloor">
                删除整层
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="roomList">
          <el-row :gutter="8">
            <el-col
              v-for="(itm, idx) in item.room_group_list"
              :key="idx"
              class="boxOut"
              :span="4"
            >
              <el-dropdown
                placement="right"
                size="medium"
                trigger="click"
                @command="
                  (value) => {
                    homeMenu(value, itm)
                  }
                "
              >
                <!-- 房间 开始 -->
                <el-card
                  :class="itm.room_status == 1 ? 'roomBox hasRent' : 'roomBox'"
                  shadow="hover"
                >
                  <div class="roomCard">
                    <div class="name">{{ itm.room_no }}</div>
                    <div class="detail">
                      <div class="statusImgs">
                        <el-tooltip
                          content="脏房"
                          placement="bottom-start"
                          trigger="hover"
                          width="200"
                        >
                          <span>
                            <img
                              v-if="itm.dirty_status == 2"
                              class="imgs"
                              src="@/assets/icons/dirty.png"
                            />
                          </span>
                        </el-tooltip>
                      </div>
                      <div class="num"></div>
                    </div>
                    <div v-if="itm.book_status == 6" class="book">定</div>
                  </div>
                </el-card>
                <!-- 房间 结束 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="itm.room_status == 0"
                    command="checkIn"
                  >
                    办理入住
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-else-if="itm.room_status == 1"
                    command="rentDetail"
                  >
                    入住详情
                  </el-dropdown-item>
                  <el-dropdown-item command="book">预定管理</el-dropdown-item>
                  <el-dropdown-item command="device">关联设备</el-dropdown-item>
                  <el-dropdown-item command="roomSet">
                    房间设置
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="itm.dirty_status == 2"
                    command="setClean"
                  >
                    设为净房
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="itm.dirty_status == 0"
                    command="setDirty"
                  >
                    设为脏房
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无数据" />
    </div>
    <add-room ref="addRoom" @fetch-data="getRoom" />
    <edit-room ref="editRoom" @fetch-data="getRoom" />
    <room-build ref="roomBuild" @fetch-data="getRoom" />
    <room-set ref="roomSet" @fetch-data="getRoom" />
    <rent-detail ref="rentDetail" @fetch-data="getRoom" />
    <book-list ref="bookList" @fetch-data="getRoom" />
    <device-list ref="deviceList" @fetch-data="getRoom" />
  </div>
</template>
<script>
import {
  getRoomList,
  deleteRoom,
  deleteFloor,
  setDirty,
  setClean,
} from '@/api/room'
import addRoom from './components/addRoom'
import editRoom from './components/editRoom'
import roomBuild from './components/roomBuild'
import roomSet from './roomSet'
import rentDetail from './rentDetail'
import bookList from './bookList'
import deviceList from './deviceList'

export default {
  name: 'Room',
  components: {
    addRoom,
    editRoom,
    roomBuild,
    roomSet,
    rentDetail,
    bookList,
    deviceList,
  },
  props: ['query'],
  data() {
    return {
      loading: false,
      list: [],
      rooms_total: 0,
      queryForm: {},
      queryNum: 0,
    }
  },
  watch: {
    query: {
      handler(newValue) {
        this.queryForm = newValue
        this.getRoom()
      },
      deep: true,
    },
  },
  mounted() {
    this.queryForm = this.query
    this.getRoom()
  },
  methods: {
    newList() {
      this.getRoom()
    },
    handleRoom(index) {
      if (index) {
        this.$refs['roomBuild'].showEdit(index)
      } else {
        this.$refs['roomBuild'].showEdit()
      }
    },
    roomMenu(tab, item) {
      if (tab == 'addRoom') {
        // 添加房间
        this.$refs['addRoom'].showEdit(item)
      }
      if (tab == 'editRoom') {
        // 编辑整套
        this.$refs['editRoom'].showEdit(item)
      }
      if (tab == 'deleteRoom') {
        // 删除整套
        this.$baseConfirm('你确定要删除整套房间吗', null, async () => {
          const { data } = await deleteRoom({ home_id: item.home_id })
          if (data.is_success) {
            this.$baseMessage('删除成功', 'success', 'vab-hey-message-success')
            await this.getRoom()
          }
        })
      }
    },
    buildMenu(tab, item) {
      if (tab == 'addRoom') {
        // 添加房间
        this.$refs['addRoom'].showEdit(item)
      }
      if (tab == 'deleteFloor') {
        // 删除整层
        this.$baseConfirm('你确定要删除整层房间吗', null, async () => {
          const { data } = await deleteFloor({
            floor_id: item.floor_id,
          })
          if (data.is_success) {
            this.$baseMessage('删除成功', 'success', 'vab-hey-message-success')
            await this.getRoom()
          }
        })
      }
    },
    async homeMenu(tab, item) {
      if (tab == 'checkIn') {
        // 办理入住
        this.$router.push({
          path: '/customer/checkIn',
          query: { id: item.id },
        })
      } else if (tab == 'rentDetail') {
        // 入住详情
        this.$refs['rentDetail'].showEdit(item)
      } else if (tab == 'book') {
        // 预定管理
        this.$refs['bookList'].showEdit(item)
      } else if (tab == 'device') {
        // 设备管理
        this.$refs['deviceList'].showEdit(item)
      } else if (tab == 'roomSet') {
        // 房间设置
        this.$refs['roomSet'].showEdit(this.queryForm.room_type, item.id)
      } else if (tab == 'setDirty') {
        // 设为脏房
        const { data } = await setDirty({ room_id: item.id })
        if (data.is_success) {
          this.$baseMessage('设置成功', 'success', 'vab-hey-message-success')
          this.getRoom()
        }
      } else if (tab == 'setClean') {
        // 设为净房
        const { data } = await setClean({ room_id: item.id })
        if (data.is_success) {
          this.$baseMessage('设置成功', 'success', 'vab-hey-message-success')
          this.getRoom()
        }
      }
    },
    async getRoom() {
      this.queryNum++
      this.loading = true
      let a = this.queryNum
      var queryData = Object.assign({}, this.queryForm)
      if (queryData.building_id == '0') {
        delete queryData.building_id
      }
      if (queryData.community_id == '') {
        delete queryData.community_id
      }
      if (queryData.group_id == '') {
        delete queryData.group_id
      }
      if (queryData.room_status == '') {
        delete queryData.room_status
      }
      if (queryData.keyword == '') {
        delete queryData.keyword
      }
      if (queryData.floor_id == '') {
        delete queryData.floor_id
      }
      const { data } = await getRoomList(queryData)
      if (a == this.queryNum) {
        this.list = data.rooms_data
        this.$emit('getTotal', data.rooms_total)
        this.rooms_total = data.rooms_total
        this.loading = false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.loadingOut {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  .loadingBox {
    width: 100px;
    height: 100px;
    text-align: center;
    i {
      font-size: 36px;
      margin-bottom: 20px;
    }
  }
}
.buildList {
  .buildBox {
    margin-bottom: 10px;
    .buildTitle {
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
      padding-left: 14px;
      line-height: 20px;
      position: relative;
      font-weight: 700;
      margin-bottom: 20px;
      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 4px;
        height: 20px;
        background: #6898fc;
        top: 0;
        left: 0;
        border-radius: 2px;
      }
      .setting {
        margin: 0 0 0 30px;
        padding: 0;
        cursor: pointer;
      }
    }
    .roomList {
      .boxOut {
        width: 178px;
      }
      .roomBox {
        width: 170px;
        height: 100px;
        margin: 0 0 20px 0;
        overflow: hidden;
        cursor: pointer;
        &.hasRent {
          background-color: #e3efff;
          border-color: #91b8ff;
        }
        ::v-deep .el-card__body {
          padding: 0px;
        }
        .roomCard {
          height: 100px;
          padding: 5px;
          position: relative;
          .name {
            font-size: 14px;
            color: #000;
            font-weight: 500;
          }
          .book {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 20px;
            text-align: center;
            background: #f5961e;
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
          }
          .detail {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            display: flex;
            align-content: center;
            justify-content: space-between;
            .statusImgs {
              display: flex;
              align-content: center;
              justify-content: center;
              .imgs {
                width: 20px;
                height: 20px;
                margin-top: 4px;
                cursor: pointer;
                margin-left: 4px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
